@model VotingSystem.ViewModels.SurveyFillViewModel

@{
    ViewData["Title"] = "填写问卷";
}

<div class="container">
    <div class="row mb-4">
        <div class="col-md-8">
            <h1 class="display-4">@Model.Title</h1>
            <p class="lead">@Model.Description</p>
        </div>
        <div class="col-md-4 text-end">
            <a asp-action="Index" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回问卷列表
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form asp-action="Fill" method="post">
                        <input type="hidden" name="id" value="@Model.SurveyId" />
                        
                        @foreach (var question in Model.Questions.OrderBy(q => q.Order))
                        {
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        @question.QuestionText
                                        @if (question.IsRequired)
                                        {
                                            <span class="text-danger">*</span>
                                        }
                                    </h5>
                                    
                                    @switch (question.Type)
                                    {
                                        case 0: // 单选题
                                            <div class="form-group">
                                                @foreach (var option in question.Options.OrderBy(o => o.Order))
                                                {
                                                    <div class="form-check">
                                                        <input class="form-check-input" 
                                                               type="radio" 
                                                               name="responses[@question.Id]" 
                                                               value="@option.Id"
                                                               id="option_@option.Id"
                                                               @(question.IsRequired ? "required" : "")>
                                                        <label class="form-check-label" for="option_@option.Id">
                                                            @option.OptionText
                                                        </label>
                                                    </div>
                                                }
                                            </div>
                                            break;

                                        case 1: // 多选题
                                            <div class="form-group">
                                                @if (question.MinSelectionCount.HasValue || question.MaxSelectionCount.HasValue || question.ExactSelectionCount.HasValue)
                                                {
                                                    <div class="alert alert-info mb-3">
                                                        @if (question.ExactSelectionCount.HasValue)
                                                        {
                                                            <p class="mb-0">必须选择 @question.ExactSelectionCount.Value 项</p>
                                                        }
                                                        else
                                                        {
                                                            @if (question.MinSelectionCount.HasValue)
                                                            {
                                                                <p class="mb-0">至少选择 @question.MinSelectionCount.Value 项</p>
                                                            }
                                                            @if (question.MaxSelectionCount.HasValue)
                                                            {
                                                                <p class="mb-0">最多选择 @question.MaxSelectionCount.Value 项</p>
                                                            }
                                                        }
                                                    </div>
                                                }
                                                @foreach (var option in question.Options.OrderBy(o => o.Order))
                                                {
                                                    <div class="form-check">
                                                        <input class="form-check-input" 
                                                               type="checkbox" 
                                                               name="responses[@question.Id]" 
                                                               value="@option.Id"
                                                               id="option_@option.Id">
                                                        <label class="form-check-label" for="option_@option.Id">
                                                            @option.OptionText
                                                        </label>
                                                    </div>
                                                }
                                            </div>
                                            break;

                                        case 2: // 填空题
                                            <div class="form-group">
                                                <textarea class="form-control" 
                                                          name="responses[@question.Id]" 
                                                          rows="3"
                                                          @(question.IsRequired ? "required" : "")></textarea>
                                            </div>
                                            break;

                                        case 3: // 评分题
                                            <div class="rating">
                                                @for (int i = 1; i <= 5; i++)
                                                {
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="responses[@question.Id]" value="@i" @(question.IsRequired ? "required" : "")>
                                                        <label class="form-check-label">@i</label>
                                                    </div>
                                                }
                                            </div>
                                            break;
                                    }
                                </div>
                            </div>
                        }

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane"></i> 提交问卷
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="~/js/survey-fill.js"></script>
    <script>
        $(document).ready(function() {
            $('form').on('submit', function(e) {
                var isValid = true;
                
                // 检查必填问题
                $('.card-title').each(function() {
                    var $title = $(this);
                    if ($title.find('.text-danger').length > 0) { // 如果是必填题
                        var $questionCard = $title.closest('.card');
                        var $inputs = $questionCard.find('input, textarea');
                        
                        if ($inputs.first().is('textarea')) {
                            // 填空题
                            if (!$inputs.val().trim()) {
                                isValid = false;
                                $inputs.addClass('is-invalid');
                            } else {
                                $inputs.removeClass('is-invalid');
                            }
                        } else if ($inputs.first().attr('type') === 'radio') {
                            // 单选题或评分题
                            if (!$inputs.is(':checked')) {
                                isValid = false;
                                $inputs.addClass('is-invalid');
                            } else {
                                $inputs.removeClass('is-invalid');
                            }
                        } else if ($inputs.first().attr('type') === 'checkbox') {
                            // 多选题
                            if (!$inputs.is(':checked')) {
                                isValid = false;
                                $inputs.addClass('is-invalid');
                            } else {
                                $inputs.removeClass('is-invalid');
                            }
                        }
                    }
                });
                
                if (!isValid) {
                    e.preventDefault();
                    alert('请填写所有必填项');
                }
            });
        });
    </script>
}

@section Styles {
    <style>
        .rating-stars {
            display: flex;
            gap: 10px;
        }
        .rating-stars .form-check {
            margin: 0;
        }
        .rating-stars .form-check-input {
            margin-right: 5px;
        }
    </style>
} 